<template>
	<view>
		<view class="d-flex a-center border-top border-bottom" style="padding: 30upx 46upx;flex-wrap: wrap;">
			<view v-for="(item,index) in typeList" :class="[defaultIdx == index?'active':'']" @click="switchOption(index)" class="type-btn d-flex j-center mr-2" style="margin-bottom: 16upx;" :key="index">
				<text>{{item.label}}{{typeCount[index]}}</text>
			</view>
		</view>
		<view v-for="(item,index) in eastateDynamic" @click="skipToEstateDetail()" :key="index" style="height: 174upx;" class="d-flex j-sb px-4 py-4 border-bottom">
			<view class="d-flex flex-column j-sb" style="width: 388upx;">
				<text class="multi-row-3-over estate-title">{{item.title}}</text>
				<view class="d-flex a-center">
					<uni-tag v-if="item.type=='楼盘资讯'" text="楼盘资讯" size="small" type="warning"></uni-tag>
					<uni-tag v-else text="最新活动" size="small" type="primary"></uni-tag>
					<view class="d-flex a-center" style="margin-left: 30upx;">
						<image src="../../../static/images/estate/author.png" style="width: 30upx;height: 30upx;" mode=""></image>
						<text style="margin-left: 10upx;color: #999999;">{{item.author}}</text>
					</view>
				</view>
			</view>
			<view>
				<image :src="item.thumb" style="width: 242upx;height: 174upx;" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				starColor: '#23C996',
				defaultIdx: 0,
				eastateDynamic:[
				{
					"content": "楼盘不错",
					"commentDate": "2020-03-03",
					"headImage": "",
					"score": 5,
					"userName": "luzhang"
				},
				{
					"content": "楼盘不错",
					"commentDate": "2020-03-03",
					"headImage": "",
					"score": 4,
					"userName": "luzhang"
				}],
                eastateDynamicAll:[
                    {
                        "content": "楼盘不错",
                        "commentDate": "2020-03-03",
                        "headImage": "",
                        "score": 5,
                        "userName": "luzhang"
                    },
                    {
                        "content": "楼盘不错",
                        "commentDate": "2020-03-03",
                        "headImage": "",
                        "score": 4,
                        "userName": "luzhang"
                    }
				],
				typeList:[
					{"label":"全部动态"},
					{"label":"楼盘资讯"},
					{"label":"最新活动"}
				],
				contentId:'',
				typeCount:[0,0,0]
			}
		},
		onLoad(options){
			if(options.contentId){
				this.contentId = options.contentId;
				this.getCommentList()
			}
		},
		components:{
			uniTag,
			uniRate
		},
		methods: {
			switchOption(idx){
				this.defaultIdx = idx;
				if(idx == 0) {
                    this.eastateDynamic =  this.eastateDynamicAll;
				} else if(idx == 1) {
                    this.eastateDynamic = [];
                    this.eastateDynamicAll.forEach(p => {
                        if(p.type == '楼盘资讯') {
                            this.eastateDynamic.push(p);
                        }
                    })
				} else if(idx == 2) {
                    this.eastateDynamic = [];
                    this.eastateDynamicAll.forEach(p => {
                        if(p.type != '楼盘资讯') {
                            this.eastateDynamic.push(p);
                        }
                    })
				}
			},
			getCommentList(){
				let _this = this;
				api.request({
						url: '/lpxx/house-dynamics',
						data: {
							contentId: _this.contentId
						}
					})
					.then(response => {
						console.log(response);
                        _this.defaultIdx = 0;
						_this.eastateDynamic = response;
                        _this.eastateDynamicAll = response;
                        _this.typeCount[0] = _this.eastateDynamicAll.length;
                        _this.eastateDynamicAll.forEach(p => {
							if(p.type == '楼盘资讯') {
                                _this.typeCount[1] = _this.typeCount[1] +1;
							} else {
                                _this.typeCount[2] = _this.typeCount[2] +1;
							}
						})
					})
					.catch(err => {
						console.log(err);
					});
			},
			skipToEstateDetail(){
				uni.navigateTo({
					url:'/pages/estate/dynamicDetail/dynamicDetail?contentId=' + 207
				})
			}
		}
	}
</script>

<style scoped>
.comment-item{
	height: 250upx;
	width: 670upx;
	padding: 30upx 40upx;
}
.type-btn{
	background: #FFFFFF;
	border: 2upx solid #333333;
	border-radius: 8upx;
	width: 180upx;
	height: 56upx;
	font-size: 28upx;
}
.type-btn.active{
	background: #005BAD;
	color: #FFFFFF!important;
	border:none
}
.estate-title{
	font-size: 32upx;
	color: #333333;
	line-height: 42upx;
}
</style>
